<template>
	<view class="content">
		<view class="myimg-top">
			<image class="myimg" src="/static/imgs/bg.png" />
		</view>

		<view class="broadcast">
			<u-notice-bar left-icon="volume-o" color="#1989fa" bgColor="#fff"
				text="在考试过程中,考生说脏话的频率是衡量考题质量的唯一标准。人生总有磕磕绊绊，但生活还得继续，只有我们努力了,才能不留遗憾！加油吧，骚年!" />
		</view>


		<view class="grid_bg">
			<view class="grid_box1">
				<view class="grid_bgcolor grid_1" bind:tap="examTrials" @click="shua">
					<text class="iconfont icon-kaoshizhongxinoff"></text>刷题试练
				</view>
				<view class="grid_bgcolor grid_2">
					<text class="iconfont icon-kaoshi"></text>
					任务中心
				</view>
			</view>

			<view class="grid_box1">
				<view class="grid_bgcolor grid_3">
					<text class="iconfont icon-renwuzhongxin"></text>
					任务挑战
				</view>
				<view class="grid_bgcolor grid_4">
					<text class="iconfont icon-zhuanti"></text>
					专题·课程
				</view>
			</view>
			<view class="myexam">我的考试</view>
		</view>




		<u-skeleton :loading="isLoading" rows="4">
			<view class="arrange" v-if="exams.length!=0">

				<view class="options" v-for="(item,index) in exams" :key="index" @click.stop="startExam(item)">
					<view class="o_top option">
						<view class="floatleft mlw" style="font-size: 36rpx;font-weight: bold;">
							{{item.name}}
						</view>

						<view class="floatright y_tag  y_tag_bgWarning mrw"
							v-if="item.startCountDown==0  && item.isFinish==0">已开始</view>

						<view class="floatright y_tag  y_tag_bgDanger mrw"
							v-if="item.startCountDown!=0 && item.isFinish==0">未开始
							<!-- <van-tag type="warning"
								wx:if="item.startCountDown==0  && item.isFinish==0">已开始</van-tag>
							<van-tag type="danger" wx:if="{{item.startCountDown!=0 && item.isFinish==0}}">未开始
							</van-tag> -->
						</view>
						<view class="floatright y_tag mrw y_tag_bgSuccess" v-if="item.isFinish==1">
							{{item.score}}分
						</view>

					</view>

					<view class="o_top option">
						<view class="floatleft  mlw">
							<view class="y_tag floatleft ">
								{{item.totalTime}}分钟
							</view>

							<view class="y_tag floatleft mlw">
								总分:{{item.totalScore}}
							</view>

							<view class="y_tag floatleft mlw">
								及格分:{{item.passScore}}
							</view>

							<view class="y_tag floatleft mlw">
								交卷:{{item.completeCount}} / {{item.allCount}}
							</view>
						</view>

					</view>




					<view class="o_top option examtime">
						时间：{{item.beginTime}} 至 {{item.endTime}}
						<view class="y_tag floatleft y_tag_bgPrimary" style="margin-right: 20rpx; margin: 10px;">
							开始考试
						</view>
					</view>

				</view>







			</view>

			<view class="arrange" v-else>
				<u-empty style="height: 150px;" text="暂时没有安排考试给你" icon="/static/imgs/data.png">
				</u-empty>
			</view>


		</u-skeleton>


	</view>
</template>

<script>
	import {
		checkLogin
	} from '../../api/login';
	import {
		getMyExam
	} from '../../api/index';

	export default {
		data() {
			return {
				isLoading: true,
				exams: [],
				time: 0,
				state: false
			}
		},
		onLoad() {
			uni.showLoading({
				title:"加载中"
			})
			//检查是否登录
			checkLogin({
				appid: uni.getStorageSync("appid")
			}).then((res) => {
				uni.hideLoading();
				if (res.result != 0) {
					// uni.setStorageSync("token", res.data.token);
					// uni.setStorageSync("user",JSON.stringify(res.data.user))
					// this.getMyExam();
					// this.getUserStatistics();
					uni.reLaunch({
						url: "/pages/login/login"
					})
				} else {
					// uni.reLaunch({
					// 	url: "/pages/login/login"
					// })

					uni.setStorageSync("token", res.data.token);
					uni.setStorageSync("user", JSON.stringify(res.data.user));
					this.getMyExam();
				}
			});

		},
		methods: {
			/**
			 * 去刷题页面
			 */
			shua(){
				uni.navigateTo({
					url:"/pages/brush_questions/brush_questions"
				})
			},
			/**点击考试去考试页面
			 * @param {Object}
			 */
			startExam(item) {
				 if(item.isFinish===1 && item.score!=null){
					 uni.navigateTo({
					 	
					 	url: `/pages/exam/result/result?id=${item.id}`
					 })
				 }else{
					 uni.navigateTo({
					 	url: `/pages/exam/examing/examing?id=${item.id}`
					 })
				 }
				
			
			},
			/**
			 * 登录用户的考试
			 */
			getMyExam() {
				getMyExam({
					page: 1,
					limit: 10,
					isEnd: 0
				}).then((res) => {
					uni.hideLoading();
					if (res.result === 0) {
						this.exams = res.data.data;
						this.isLoading = false;

					}
				})

			},




		}
	}
</script>

<style scoped>
@import url("/static/main.css");
	@import url("/static/iconfont/icons.css");

	.examtime {
		font-size: 12px;
		color: rgb(128, 128, 128);
		margin-left: 10rpx;
	}

	.option {
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
		width: 100%;
	}



	.options {
		margin-left: 1.2%;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		margin-top: 6rpx;
		width: 97%;
		border-radius: 10rpx;
		margin-bottom: 5rpx;
		/* border: 1px solid red; */
		border: 1px solid rgba(25, 137, 250, 0.2);
	}

	.options:nth-child(1) {
		margin-top: 10rpx;
		margin-bottom: 5rpx;
	}

	.options:last-child {
		margin-bottom: 10rpx;
	}

	.y_tag {
		margin-top: 6rpx;
		padding: 4rpx;
		height: 24rpx;
		text-align: center;
		line-height: 24rpx;
		border: 1px solid rgb(25, 137, 250);
		color: rgb(25, 137, 250);
		border-radius: 6rpx;
		font-size: 10px;
	}

	.o_top {
		width: 100%;
	}










	.boxs {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
		padding: 5px;
	}


	.myimg {
		width: 100%;
		height: 260rpx;
	}

	.grid_box1 {
		display: flex;
		line-height: 200rpx;
		user-select: none;
		font-size: 20px;
		text-align: center;
		font-weight: bold;
		color: #fff;
	}

	.grid_bg {
		position: relative;
		/* height: 490rpx; */
		height: 440rpx;
		background-color: rgb(245, 245, 245);
	}

	.grid_bgcolor {
		margin-top: 10rpx;
		/* width: 360rpx; */
		width: 48%;
		height: 180rpx;
		border-radius: 10px;
	}

	.grid_1 {
		margin-left: 10.5rpx;
		background-image: linear-gradient(to right, #ffc1cb, #fc7bbb);
	}

	.grid_2 {
		margin-left: 10rpx;
		background-image: linear-gradient(to right, #956edd, #dc9fdd);
	}

	.grid_3 {
		margin-left: 10.5rpx;
		background-image: linear-gradient(to right, #add8ef, #23b3ac);
	}

	.grid_4 {
		margin-left: 10rpx;
		background-image: linear-gradient(to right, #f0807f, #fe9f7a);
	}



	.myexam {
		width: 208rpx;
		height: 50rpx;
		position: absolute;
		bottom: 0rpx;
		background-color: #dda0dd;
		text-align: center;
		line-height: 50rpx;
		color: #fff;
		font-size: 18px;
		border-radius: 0px 50px 50px 0px;
	}

	.arrange {
		padding-bottom: 100rpx;
	}

	.u-empty {
		height: 280px;
	}

	.broadcast {
		height: 64rpx;
		margin-top: -20rpx;
	}


	.exams {
		border: 1px solid #eee;
		border-radius: 8rpx;
		width: 97.5%;
		margin-left: 1%;
		margin-top: 10rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, .12), 0 0 12rpx rgba(0, 0, 0, .04);
	}

	.u-cell-text {
		font-size: 30rpx;
		font-weight: bold;
		color: #000000;
	}

	.datetimes {
		font-size: 24rpx;
	}
</style>